<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>前端原型 - 网页浏览器</title>
  <link rel="stylesheet" href="../assets/wireframe.css" />
</head>
<body>
  <div class="app-shell">
    <header class="wf-header">
      <a class="wf-btn" href="./super-search.html">返回</a>
      <div class="wf-title">网页浏览器</div>
    </header>
    <main class="wf-container">
      <!-- 地址栏 -->
      <div class="wf-card">
        <div class="wf-section-title">地址栏</div>
        <div class="wf-row">
          <input class="wf-input" placeholder="输入网址或搜索关键词" style="flex:1" />
          <button class="wf-btn primary">访问</button>
        </div>
      </div>
      
      <!-- 浏览器工具栏 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">工具栏</div>
        <div class="wf-row">
          <button class="wf-btn">← 后退</button>
          <button class="wf-btn">→ 前进</button>
          <button class="wf-btn">🔄 刷新</button>
          <button class="wf-btn">🏠 首页</button>
        </div>
      </div>
      
      <!-- 网页内容区域 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">网页内容（占位）</div>
        <div class="wf-skeleton" style="height:400px"></div>
        <div class="wf-note">提示：这是浏览器页面的线框示意，实际应用中会显示真实的网页内容。</div>
      </div>
      
      <!-- 搜索引擎快捷入口 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">搜索引擎</div>
        <div class="wf-grid">
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">百度</div><div class="wf-block-desc">🔍 百度搜索</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">谷歌</div><div class="wf-block-desc">🌐 Google搜索</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">必应</div><div class="wf-block-desc">🔎 Bing搜索</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">搜狗</div><div class="wf-block-desc">🔍 搜狗搜索</div></a></div>
        </div>
      </div>
    </main>
  </div>
  <script src="../assets/wireframe.js"></script>
</body>
</html>
